import cn from "classnames";
import { useChatMessages } from "./store";
import Markdown from "react-markdown";
import remarkGfm from "remark-gfm";

type Props = {
  className?: string;
};

export default function Messages({ className }: Props) {
  const { messages } = useChatMessages((state) => state);

  return (
    <div
      className={cn("flex flex-col gap-4", className)}
      style={{
        scrollbarWidth: "thin",
      }}
    >
      {messages.map((m) => (
        <MessageItem key={m.id} text={m.data} from={m.from} />
      ))}
    </div>
  );
}

// TODO: 自动滚动到底部
function MessageItem({ text, from }: { text: string; from: string }) {
  return (
    <div className="flex gap-2 ">
      <div
        className="bg-indigo-600 flex-none rounded-md text-white flex justify-center items-center"
        style={{ width: 32, height: 32 }}
      >
        {from.substring(0, 1).toUpperCase()}
      </div>
      <div className="bg-indigo-200 py-2 px-4 rounded-md">
        <Markdown remarkPlugins={[remarkGfm]}>{text}</Markdown>
      </div>
    </div>
  );
}
